<template>
	<view class="logistics">
		<navBar text="已发货">
			<template v-slot:head>
				<image class="headPic" src="@/static/order-icons/send_finish.png" mode=""></image>
				<text>已发货</text>
			</template>
			<template v-slot:subhead>
				发货后
				<text style="color: #ffffff; margin: 0 5px">{{ 30 }}天</text>
				自动确认收货，剩余
				<text style="color: #ffffff; margin: 0 5px">{{ 10 }}</text>
				天
			</template>
		</navBar>
		<view class="order-details">
			<view class="good-detail-card card">
				<view class="good-detail">
					<image src="@/static/images/Order/good.png"></image>
					<view class="info">
						<view class="title">锦鲤算力机-K1</view>
						<view class="good-price">
							<view class="num">*1</view>
							<view class="price-All">2000USDT</view>
						</view>
					</view>
				</view>
				<view class="cell freight">
					<text class="label">运费</text>
					<text class="price">100USDT</text>
				</view>
				<view class="cell all">
					<text class="label">总额</text>
					<text class="price">2100USDT</text>
				</view>
			</view>

			<view class="good-logistics card">
				<view class="location cell">
					<view class="label">收货地址</view>
					<view class="content">李二狗，13544495068，北京市朝阳区劲松街道华腾园6-1508</view>
				</view>
				<view class="order-number cell">
					<view class="label">订单编号</view>
					<view class="content">1685165181651681651</view>
				</view>
				<view class="create-time cell">
					<view class="label">创建时间</view>
					<view class="content">2023年10月10日 21:19:28</view>
				</view>
				<view class="pay-time cell">
					<view class="label">支付时间</view>
					<view class="content">2023年10月10日 21:20:47</view>
				</view>
			</view>
			<view class="good-order card">
				<view class="cell">
					<view class="label">快递单号</view>
					<view class="content">SF1003487868117</view>
				</view>
				<view class="cell">
					<view class="label">发货时间</view>
					<view class="content">2023年10月10日 21:20:47</view>
				</view>
			</view>
			<view class="under-btn">
				<button>确认收货</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.logistics {
	height: 100vh;
	display: flex;
	flex-direction: column;
	color: #fff;
	.order-details {
		flex: 1;
		padding: 40px 32px 0 32px;
		margin-top: -40px;
		background-color: #121316;
		border-top-left-radius: 45px 40px;
		border-top-right-radius: 45px 40px;
		position: relative;
		overflow: auto;
		.card {
			margin-bottom: 32px;
			padding: 0 32px 0 32px;
			background-color: rgba(255, 255, 255, 0.1);
			border-radius: 16px;
		}

		.good-detail-card {
			padding-top: 32px;
			.good-detail {
				display: flex;
				margin-bottom: 16px;
				image {
					width: 160px;
					height: 160px;
				}
				.info {
					flex: 1;
					padding: 21px 0 23px 24px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						font-size: 32px;
						line-height: 45px;
					}
					.good-price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.num {
							font-size: 24px;
						}
						.price-All {
							font-size: 28px;
							line-height: 40px;
						}
					}
				}
			}
			.cell {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80px;
				.label {
					font-size: 24px;
				}
			}
			.freight {
				.price {
					font-size: 28px;
				}
			}
			.all {
				.price {
					font-size: 32px;
					font-weight: 600;
				}
			}
		}

		.good-logistics {
			.cell {
				display: flex;
				justify-content: space-between;
				align-items: c;
				font-size: 24px;
				height: 80px;
				.content {
					color: rgba(255, 255, 255, 0.3);
				}
			}
			.location {
				height: auto;
				padding: 23px 0;
				.label {
					width: 100px;
					margin-right: 60px;
				}
				.content {
					flex: 1;
					line-height: 34px;
				}
			}
		}
		// @/static/images/Order/order_copy.png
		.good-order {
			margin-bottom: 200px;
			.cell {
				display: flex;
				justify-content: space-between;
				font-size: 24px;
				height: 80px;
				align-items: center;
				.content {
					color: rgba(255, 255, 255, 0.3);
				}
			}
		}

		.under-btn {
			margin: 0 -32px;
			width: 100vw;
			height: 112px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.3);
			button {
				width: 160px;
				height: 80px;
				text-align: center;
				line-height: 80px;
				background-color: #4e47ff;
				font-size: 28px;
				color: #fff;
				margin-right: 32px;
			}
		}
	}
}
</style>
